<template>
    <div class="mine">
      <h2>个人信息</h2>
      <el-row>
        <el-col>
          <el-form :model="mine"  ref="ruleForm2" label-width="120px">
            <el-form-item label="姓名" prop="name">
              <span v-model="mine.username">{{mine.username}}</span>
            </el-form-item>
            <el-form-item label="电话号码" prop="tel">
              <el-input v-if="isEdit" type="tel" v-model="mine.tel" autocomplete="off"></el-input>
              <span v-else v-model="mine.tel">{{mine.tel}}</span>
            </el-form-item>
            <el-form-item label="密码" prop="pwd">
              <el-input v-if="isEdit" type="pwd" v-model="mine.password" autocomplete="off"></el-input>
              <span v-else v-model="mine.password">{{mine.password}}</span>
            </el-form-item>
            <el-form-item>
              <el-button v-if="isEdit" type="primary" @click="handelConfirm">确定</el-button>
              <el-button v-if="isEdit" type="primary" @click="handelConcel">取消</el-button>
              <el-button v-else type="primary" @click="handelEdit">编辑信息</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-row>
      </el-row>
    </div>
</template>

<script>
  import { Message } from 'element-ui';
    export default {
        name: "mine",
        data() {
            return {
              isEdit:false,//是否处于编辑状态，默认为false
              mine:{
                username:JSON.parse(window.localStorage.getItem('logInfo')).username,
                tel:JSON.parse(window.localStorage.getItem('logInfo')).tel,
                password:JSON.parse(window.localStorage.getItem('logInfo')).password,
              }
            }
        },
        methods: {
          handelEdit(){
            //编辑信息
            this.isEdit=true;
          },
          handelConfirm(){
            //确认修改
            const data= this.mine;
            data.id=JSON.parse(localStorage.getItem('logInfo')).id;
            this.$http.toPut('user/update',data)
              .then(resp=>{
                if(resp.resultCode===0){
                  delete data.password;
                  window.localStorage.setItem('logInfo',JSON.stringify(data));
                  Message.success({message:'修改个人信息成功，请重新登录',duration:'2000'});
                  this.$router.push('/');
                }
              });
            this.isEdit=false;
          },
          handelConcel(){
            //取消
          }
        },
        computed: {},
        components: {},
        mounted() {}
    }
</script>

<style lang="less" scoped>
.mine{
  width: 60%;
  margin: 0 auto;
  margin-top: 50px;
  h2{
    text-align: center;
    font-size: 30px;
    color:#6A6371 ;
    margin-bottom: 30px;
  }
  .el-input{
    width: 80%;
  }
}
</style>
